<template>
    <view class="pub_page pub_page_bg pub_mine_send pub_header_padding">
        <pub-head :headerConfig="headerConfig" @headerBack="headerBack"></pub-head>
        <pub-dialog v-show="dialogShow" :dialogConfig="dialogConfig" @dialogBack="dialogBack"></pub-dialog>
        <z-paging ref="Zpaging" class="pub_page_scroll page_box" v-model="list" @query="getList"
            :refresher-enabled="false" :fixed="false" :show-loading-more-no-more-view="false" :hide-empty-view="true">
            <div class="input_div">
                <div class="title">转赠对方手机号</div>
                <div class="inputs">
                    <div class="input">
                        <input type="text" v-model="giveInfo.mobile" maxlength="11">
                    </div>
                </div>
            </div>
            <div class="input_div">
                <div class="title">转赠数量</div>
                <div class="inputs">
                    <div class="input">
                        <input type="text" v-model="giveInfo.num">
                    </div>
                </div>
                <div class="msg" v-if="giveType==1">当前旺票：{{ userInfo.consumeTicket || 0 }}，手续费：{{giveProNum}}</div>
                <div class="msg" v-if="giveType==2">当前承兑汇票：{{ userInfo.acceptanceBill || 0 }}，手续费：{{giveProNum}}</div>
                <div class="msg" v-if="giveType==3">当前幸运值：{{ userInfo.increment || 0 }}，手续费：{{giveProNum}}</div>
            </div>
            <div class="input_div">
                <div class="title">二级密码</div>
                <div class="inputs">
                    <div class="input">
                        <input type="password" v-model="giveInfo.payPassword" maxlength="6">
                    </div>
                </div>
                <br>
                <br>
                <div class="pub_btn" @click="toDeal('to_give')">确认转赠</div>
            </div>
            <br>
            <br>
            <div class="lis_div">
                <div class="tabs">
                    <div class="tab" :class="listType==0?'tab_active':''" @click="listTypeClick(0)">赠送</div>
                    <div class="tab" :class="listType==1?'tab_active':''" @click="listTypeClick(1)">接收</div>
                </div>
                <div class="lis_box">
                    <div class="li_td li_th">
                        <div class="li">{{ listType==0?'接收人':'转赠人' }}</div>
                        <div class="li">数量</div>
                        <div class="li li_big">时间</div>
                        <div class="li">状态</div>
                    </div>
                    <div class="li_td" v-for="(li, key) in list" :key="key">
                        <div class="li">{{ listType==0?li.toMobile:li.mobile }}</div>
                        <!-- <div class="li">{{ li.num }}{{giveTypeName[giveType]}}</div> -->
                        <div class="li">{{ li.num }}</div>
                        <div class="li li_big">{{ li.createTime }}</div>
                        <div class="li">
                            <div class="pub_btn" v-if="li.status==1&&listType==0"
                                @click="toDeal('to_give_two',li.id,key)">
                                二次确认</div>
                            <div class="pub_btn pub_btn_no" v-if="li.status==1&&listType==1">等待确认</div>
                            <div class="pub_btn pub_btn_no" v-if="li.status==2">已完成</div>
                        </div>
                    </div>
                    <div class="pub_nodata_1" v-if="list.length==0">暂无数据</div>
                </div>
            </div>
            <br>
            <br>
        </z-paging>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pagescrollTop: 0,
            headerConfig: {
                title: '',//标题栏内容
                left_type: 3,
                title_color: '#000',
                left_content: 'dark',
                header_color: '#fff'
            },
            dialogShow: false,
            dialogType: '',
            dialogConfig: {
                title: '提示',//标题栏内容
                content: ''
            },
            confirmGiveId: '',
            confirmGiveKey: -1,

            userInfo: '',
            giveGetPro: 0,
            giveProNum: 0,
            // 转赠相关数据
            giveInfo: {
                mobile: '',
                num: '',
                payPassword: '',
            },
            giveType: 1,//1旺票 2承兑汇票  3幸运值
            giveTypeName: ['', '旺票', '承兑汇票', '幸运值'],
            list: [],
            listType: 0,//0赠送  1接收

            maxGiveNum: 0,
        };
    },
    watch: {
        'giveInfo.num': {
            handler() {
                this.giveInfo.num = this.giveInfo.num.replace(/^(0+)|[^\d]+/g, '');
                this.giveProNum = Math.round(this.giveInfo.num * this.giveGetPro * 100) / 100;
            },
            immediate: true,
            deep: true
        },
    },
    computed: {
        showExperience() {
            return this.giveInfo.num / 1000;
        }
    },
    onLoad(option) {
        this.giveType = option.giveType || 1;
        let title = ['', '旺票转赠', '承兑汇票转赠', '幸运值转赠']
        this.headerConfig.title = title[this.giveType];
        this.getPageInfo();
        this.getConfig();
        setTimeout(() => {
            this.$comFun.openLoading();
            this.$refs.Zpaging.reload()
        }, 400);
    },
    onPageScroll(res) {
        this.pagescrollTop = res.scrollTop;
    },
    methods: {
        headerBack(data) {
            if (data.type == 'right') { }
        },
        dialogBack(data) {
            // console.log(data);
            this.dialogShow = false;
            if (data.key == 1) {
                this.toDeal(this.dialogType)
            }
        },
        async getPageInfo() {
            const res = await this.$request.get('user/userInfo', {});
            // console.log(res);
            // console.log(res);
            if (res.code == 200) {
                this.userInfo = res.result;
            }
        },
        async getConfig() {
            if (this.giveType == 1 || this.giveType == 2 || this.giveType == 3) {
                const res = await this.$request.get('user/getGivePro', {
                    type: this.giveType
                });
                if (res.code == 200) {
                    this.giveGetPro = res.result;
                }
            }
        },
        listTypeClick(listType) {
            this.listType = listType;
            this.$comFun.openLoading();
            this.$refs.Zpaging.reload()
        },
        async getList(pageNo, pageSize) {
            const res = await this.$request.get('user/getGivePage', {
                pageNo: pageNo,
                pageSize: pageSize,
                type: this.listType,
                giveType: this.giveType
            });
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                this.$refs.Zpaging.complete(res.result.records);
            } else {
                this.$refs.Zpaging.complete(false);
            }
        },
        async toDeal(type, data_1, data_2) {
            switch (type) {
                case 'to_give':
                    if (!this.giveInfo.mobile) {
                        this.$comFun.toast('请先填写转赠手机号');
                        return;
                    }
                    if (this.giveInfo.num == '' || !this.$comFun.ValidateNum(this.giveInfo.num)) {
                        this.$comFun.toast('请先填写正确的数量');
                        return;
                    }
                    if (!this.giveInfo.payPassword) {
                        this.$comFun.toast('请先填写二级密码');
                        return;
                    }
                    this.dialogType = 'sure_give';
                    this.dialogConfig = {
                        title: '提示',//标题栏内容
                        content: '是否确定转赠？'
                    }
                    this.dialogShow = true;
                    break;
                case 'sure_give':
                    this.$comFun.openLoading();
                    const res_2 = await this.$request.post('user/give', {
                        ...this.giveInfo,
                        type: this.giveType
                    });
                    // console.log(res_2);
                    this.$comFun.closeLoading();
                    if (res_2.code == 200) {
                        this.giveInfo.mobile = '';
                        this.giveInfo.num = '';
                        this.giveInfo.payPassword = '';
                        this.$comFun.toast('转赠成功');
                        this.getPageInfo();
                        setTimeout(() => {
                            this.$refs.Zpaging.reload();
                        }, 1000)
                    } else {
                        this.$comFun.toast(res_2.message);
                    }
                    break;
                case 'to_give_two':
                    this.confirmGiveId = data_1;
                    this.confirmGiveKey = data_2;
                    this.dialogType = 'sure_give_two';
                    this.dialogConfig = {
                        title: '提示',//标题栏内容
                        content: '是否确定执行当前操作？'
                    }
                    this.dialogShow = true;
                    break;
                case 'sure_give_two':
                    this.$comFun.openLoading();
                    const res_3 = await this.$request.get('user/confirmGive', {
                        id: this.confirmGiveId
                    });
                    // console.log(res_2);
                    this.$comFun.closeLoading();
                    if (res_3.code == 200) {
                        this.list[this.confirmGiveKey].status = 2;
                        this.confirmGiveId = '';
                        this.confirmGiveKey = -1;
                        this.$comFun.toast('操作成功');
                    } else {
                        this.$comFun.toast(res_3.message);
                    }
                    break;
                default:
                    break;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/mine.scss";
</style>
